<template>
  <!--侧边栏-->
  <div class="asideline" v-show="goTopShow" style="height: initial">
    <div class="aside-con">
      <ul>
        <!--<li class="aside-li1" @mouseover="toggle" @mouseout="toggle">
          <a href="##" class="old" >
            <img src="../../assets/phone.png" alt="" width="35">
            电话咨询
            &lt;!&ndash;<div class="arrow"></div>&ndash;&gt;

          </a>
          <transition name="fade">
            <a href="##" class="tell" v-show="isShow"><Icon type="ios-call" /> 0755-28288261 </a>
          </transition>

        </li>-->
        <li class="aside-li" @mouseover="toggle1" @mouseout="toggle1">
          <a href="">
            <img src="../../assets/bigqq.png" alt="" width="40">
            QQ咨询
            <!--<div class="arrow"></div>-->
            <transition name="fade">
              <a href="http://wpa.qq.com/msgrd?v=3&uin=2399046635&site=qq&menu=yes" target="_black" class="tell qq" v-show="isShow1"><Icon type="ios-chatboxes" /> 2399046635</a>
            </transition>
          </a>
        </li>
        <li class="backtop" @click="goTop">
          <a href="javascript:;">
            <img src="../../assets/totop.png" alt="" width="33">
            返回顶部
          </a>

        </li>
      </ul>
    </div>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .fade-enter-active, .fade-leave-active {
    transition: all 0.3s linear;
    transform: translate3d(0, 0, 0);
  }
  .fade-enter, .fade-leave {
    transform: translate3d(100%, 0, 0);
  }
  .asideline{
    position:fixed;
    right:0;
    width:70px;
    bottom:10%;
    z-index:1;
    background-color: #957960;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-top: 25px;
    height: 320px;
    li{
      height:87px;
      position: relative;
      left: 0;

      text-align: center;
      img{
        display: block;
        margin:10px auto;
      }
      >a{
        display:block;
        color:#fff;
        font-size: 12px;
        position: relative;


      }
      /*&:hover .tell{*/
      /*!*display: block;*!*/
      /*opacity: 1;*/

      /*}*/
      /*.arrow{*/
      /*display: none;*/
      /*position: absolute;*/
      /*left: -5px;*/
      /*top:50%;*/
      /*width:0;*/
      /*height:0;*/
      /*border-top:7px solid transparent;*/
      /*border-right:7px solid #957960;*/
      /*border-bottom:7px solid transparent;*/
      /*}*/
      .tell{

        background-color: #957960;
        position: absolute;
        width: 170px;
        z-index: 99;
        height: 63px;
        line-height: 63px;
        font-size: 16px;
        left:-170px;
        top: 50%;
        margin-top: -45px;
        color: #fff;
        i{
          font-size: 24px;
        }
      }
      .qq{
        margin-top: -30px;
      }
    }
  }
</style>
<script type="text/ecmascript-6">
  export default {
    name: '',
    props: {},
    data() {
      return {
        scrollTop: '',
        goTopShow:false,
        isShow:false,
        isShow1:false
      };
    },
    methods: {
      handleScroll () {
        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        let clientHeight=document.documentElement.clientHeight;
        if(this.scrollTop >= clientHeight) {
          this.goTopShow = true;
        }else {
          this.goTopShow = false;
        }
      },
      toggle(){
        this.isShow = !this.isShow;
      },
      toggle1(){
        this.isShow1 = !this.isShow1;
      },
      goTop(){
        let timer = null, _that = this;
        cancelAnimationFrame(timer)
        timer = requestAnimationFrame(function fn() {
          if (_that.scrollTop > 0) {
            _that.scrollTop -= 50;
            document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
            timer = requestAnimationFrame(fn)
          } else {
            cancelAnimationFrame(timer);
            _that.goTopShow = false;
          }
        })
      }
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll);
    },
    destroyed(){
      window.removeEventListener('scroll', this.handleScroll)
    }
  }
</script>
